$medium-grey: #ddd;
$fontColor: white;
$bgColor: rgb(0, 121, 191);
$boardColor: rgba(white, 0.5);

.root {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.board {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  // Override Automatic Minimum Size
  // https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size
  min-width: 0;
  min-height: 0;
  background: $bgColor;

  .board-bar {
    padding: 8px 15px;

    .board-name {
      font-size: 20px;
      font-weight: bold;
      color: $fontColor;
      text-align: left;
    }
  }

  .board-wrapper {
    display: flex;
    flex-grow: 1;
    overflow-x: auto;

    .board-columns {
      display: flex;
      flex-grow: 1;

      .board-column {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        flex-basis: 0; // to force the columns to all be the same size, regardless of content
        min-width: 250px;
        margin: 12px;
        padding: 12px;
        border-radius: 4px;
        background: $boardColor;

        &:not(:first-child) {
          margin-left: 0;
        }

        .column-title {
          font-size: 20px;
          font-weight: 800;
          text-transform: uppercase;
          margin-bottom: 20px;
        }
      }
    }
  }
}

.tasks-container {
  flex-grow: 1;
  overflow-y: auto;
}

.task {
  display: flex;
  padding: 15px 12px;
  background: $fontColor;
  border-bottom: solid 1px $medium-grey;
  border-radius: 4px;
  margin-bottom: 15px;
  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.05),
  0 3px 14px 2px rgba(0, 0, 0, 0.05);
}

.cdk-drag-preview {
  box-sizing: border-box;
  border-radius: 4px;
  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
  0 8px 10px 1px rgba(0, 0, 0, 0.14),
  0 3px 14px 2px rgba(0, 0, 0, 0.12);
}

.cdk-drag-placeholder {
  opacity: 0;
}

.cdk-drag-animating {
  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}

.tasks-container.cdk-drop-list-dragging .task:not(.cdk-drag-placeholder) {
  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}
